<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      :label-position="labelPosition"
      label-width="100px"
      :size="size"
    >
      <el-form-item
        v-for="(item, index) in ruleData"
        :key="index"
        :label="item.label"
        :prop="item.prop || ''"
        :class="item.class"
        v-show="!item.hidden"
      >
        <template>
          <template v-if="item.type === 'input'">
            <el-input
              v-if="item.clickFunc"
              :type="item.inputText || 'text'"
              :readonly="item.readonly || false"
              :disabled="item.disabled || false"
              @click.native="item.clickFunc"
              :class="item.clickFunc ? 'pointer' : ''"
              :ref="item.ref"
              v-model="ruleForm[item.prop]"
            >
            </el-input>
            <el-input
              v-else
              :type="item.inputText || 'text'"
              :readonly="item.readonly || false"
              :disabled="item.disabled || false"
              v-model="ruleForm[item.prop]"
            >
            </el-input>
          </template>
          <template v-else-if="item.type == 'select'">
            <el-select
              v-model="ruleForm[item.prop]"
              :placeholder="item.placeholder || '请选择'"
              @change="selectChange"
            >
              <el-option
                v-for="i in item.options"
                :key="i[item.value] || i.value"
                :label="i[item.key] || i.label"
                :value="i[item.value] || i.value"
                :disabled="i.disabled"
              >
              </el-option>
            </el-select>
          </template>
          <template v-else-if="item.type === 'switch'">
            <el-switch v-model="ruleForm[item.prop]"></el-switch>
          </template>
          <template v-else-if="item.type === 'radio'">
            <el-radio-group
              @change="radioChange($event,item.prop)"
              v-model="ruleForm[item.prop]"
            >
              <el-radio
                v-for="(child,childIndex) in item.children"
                :key="childIndex"
                :label="child.id"
              >{{child.label}}</el-radio>
            </el-radio-group>
          </template>
          <template
            v-else-if="item.type == 'customize'"
            name="form-slot"
            slot-scope="scope"
          >
            <slot :scope="scope">
            </slot>
          </template>
        </template>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'rule-form',
  data() {
    return {
      // labelPosition: 'left'
    }
  },
  props: {
    // 表单数据
    ruleData: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 表单model
    ruleForm: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 表单验证规则
    rules: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 标签位置
    labelPosition: {
      type: String,
      default: 'left'
    },
    size: {
      type: String,
      default: 'small'
    }
  },
  methods: {
    selectChange(val) {
      // console.log(val ,'selectChange')
      this.$emit('selectChange', val)
    },
    radioChange(event, prop) {
      // console.log(event,prop,'radioChange')
      this.$emit('radio-change', event, prop)
    }
  }
}
</script>
<style lang="scss">
.pointer input {
  cursor: pointer;
}
</style>